<template>
	<view class="page-main">
		<template v-if="hasPermission">
		<view class="search">
			<view class="search-con">
				<view class="search-con-keyword">
					<input class="search-con-keyword-inp" type="text" v-model="searchKeyword"
						placeholder="输入物料编码、物料名称或型号" @input="searchChange" :auto-focus="showFocus" />
					<view class="search-con-keyword-submit" @click="search()"><text
							class="search-keyword-submit-text">搜索</text></view>
				</view>
			</view>
		</view>
		<view class="material">
			<view class="material-head">
				<view class="material-head-col" style="width: 200rpx">
					<text class="material-head-col-text">名称</text>
				</view>
				<view class="material-head-col" style="width: 150rpx">
					<text class="material-head-col-text">编码</text>
				</view>
				<view class="material-head-col" style="width: 120rpx">
					<text class="material-head-col-text">型号</text>
				</view>
				<view class="material-head-col" style="width: 100rpx">
					<text class="material-head-col-text">库存</text>
				</view>
				<view class="material-head-col" style="width: 180rpx">
					<text class="material-head-col-text">操作</text>
				</view>
			</view>
			<view class="material-list">
				<select-material-item v-for="(item, index) in list" :item="item" :index="index" @selectCabinet="selectCabinet"></select-material-item>
			</view>
		</view>	
		</template>
		
		<!-- 无权限时显示提示 -->
		<view v-else class="no-permission">
			<image src="/static/no-permission.png" mode="aspectFit" class="no-permission-img"></image>
			<text class="no-permission-text">您没有权限访问此功能</text>
			<text class="no-permission-desc">请联系管理员获取权限</text>
		</view>
	</view>
</template>

<script>
	const API = require("../../utils/apiConfig.js");
	import selectMaterialItem from './components/select-material-item.vue';
	export default {
		components: { selectMaterialItem },
		data() {
			return {
				searchKeyword: '',
				pageIndex: 1,
				cabinetSelectValue: {},
				categorySelectValue: '',
				list: [],
				hasPermission: true, // 初始设为无权限
			}
		},
		onLoad() {
			this.hasPermission = getApp().globalData.is_admin;
		},
		
		onShow() {
			this.getMaterialList();
		},
		methods: {
			search(){
				this.getMaterialList();
			},
			getMaterialList() {
				API.repairmaterial({
					page: this.pageIndex,
					rows: 20,
					st_name: this.cabinetSelectValue.st_name,
					cur_marshalling: 1, //是否只返回当前编组物料 当cur_marshalling=1时为返回当前编组物料，不传返回所有的物料
					category_name: this.categorySelectValue,
					search: this.searchKeyword
				}).then((res) => {
					console.log("repairmaterial     " + JSON.stringify(res));
					if (res.code == 0) {
						this.list = res.data.list;
					}
				})
			},
			selectCabinet(item){
				uni.navigateTo({
					url:'/pages/supplement/selectCabinet/selectCabinet?material=' + encodeURIComponent(JSON.stringify(item)),
				})
			},
			searchChange(){
				this.getMaterialList();
			},
		}
	}
</script>

<style lang="scss">
	/* pages/your-page/your-page.wxss */
	.page-main {
	  width: 100%;
	  height: 100vh;
	  display: flex;
	  flex-direction: column;
	  background-color: #f7f7f7;
	}
	
	/* 搜索框区域 */
	.search {
	  padding: 20rpx;
	  background-color: #fff;
	  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}
	
	.search-con {
	  width: 100%;
	  display: flex;
	  align-items: center;
	}
	
	.search-con-keyword {
	  display: flex;
	  width: 100%;
	  background-color: #f2f2f2;
	  border-radius: 40rpx;
	  overflow: hidden;
	}
	
	.search-con-keyword-inp {
	  flex: 1;
	  height: 72rpx;
	  padding: 0 20rpx;
	  font-size: 28rpx;
	  color: #333;
	}
	
	.search-con-keyword-submit {
	  width: 120rpx;
	  height: 72rpx;
	  line-height: 72rpx;
	  text-align: center;
	  background-color: #07c160;
	  color: #fff;
	  font-size: 28rpx;
	}
	
	.search-keyword-submit-text {
	  font-weight: 500;
	}
	
	/* 物料列表区域 */
	.material {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  overflow: hidden;
	  background-color: #fff;
	  margin-top: 16rpx;
	}
	
	/* 表头 */
	.material-head {
	  display: flex;
	  padding: 24rpx 0;
	  background-color: #333847;
	  border-bottom: 1rpx solid #eee;
	  position: sticky;
	  top: 0;
	  z-index: 10;
	}
	
	.material-head-col {
	  text-align: center;
	  font-size: 26rpx;
	  color: #fff;
	  font-weight: 500;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}
	
	/* 列表内容 */
	.material-list {
	  flex: 1;
	  overflow-y: auto;
	}
	
	/* 列表项样式 - 适配select-material-item组件 */
	.material-item {
	  display: flex;
	  align-items: center;
	  padding: 24rpx 0;
	  border-bottom: 1rpx solid #f0f0f0;
	}
	
	.material-item-col {
	  text-align: center;
	  font-size: 26rpx;
	  color: #666;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  padding: 0 8rpx;
	}
	
	/* 操作按钮样式 */
	.action-btn {
	  margin: 0 8rpx;
	  padding: 8rpx 16rpx;
	  font-size: 24rpx;
	  border-radius: 6rpx;
	  background-color: #07c160;
	  color: #fff;
	}
	
	.action-btn.warn {
	  background-color: #fa5151;
	}
	/* 无权限提示样式 */
	.no-permission {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 40rpx;
		text-align: center;
	}
	
	.no-permission-img {
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 40rpx;
	}
	
	.no-permission-text {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.no-permission-desc {
		font-size: 28rpx;
		color: #999;
	}
</style>